<template>
  <div class="dashboard-container">
    <!-- 顶部数据卡片 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in dashboardCards" :key="index">
        <el-card class="data-card" :body-style="{ padding: '20px' }">
          <div class="card-content">
            <div class="icon-wrapper" :style="{ background: item.bgColor }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="data-info">
              <div class="data-title">{{ item.title }}</div>
              <div class="data-value">{{ item.value }}</div>
              <div class="data-compare">
                <span>较上周</span>
                <span :class="item.trend">
                  {{ item.rate }}
                  <el-icon>
                    <CaretTop v-if="item.trend === 'up'" />
                    <CaretBottom v-else />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>销售趋势</span>
              <el-radio-group v-model="timeRange" size="small" @change="updateTrendChart">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="trendChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="chart-header">
              <span>销售分布</span>
            </div>
          </template>
          <div ref="pieChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row :gutter="20" class="activity-row">
      <el-col :span="12">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>最近订单</span>
              <el-button text>查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentOrders" style="width: 100%" size="large">
            <el-table-column prop="id" label="订单号" width="120" />
            <el-table-column prop="product" label="商品" />
            <el-table-column prop="amount" label="金额" width="100">
              <template #default="{ row }">
                <span class="amount">¥{{ row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status.type">{{ row.status.text }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="activity-card">
          <template #header>
            <div class="card-header">
              <span>系统动态</span>
              <el-button text>查看更多</el-button>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in recentActivities"
              :key="index"
              :type="activity.type"
              :timestamp="activity.time"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from "vue";
import {
  User,
  ShoppingCart,
  Wallet,
  TrendCharts,
  CaretTop,
  CaretBottom,
} from "@element-plus/icons-vue";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";

// 仪表盘卡片数据
const dashboardCards = [
  {
    title: "总用户数",
    value: "12,839",
    icon: User,
    bgColor: "var(--el-color-primary)",
    trend: "up",
    rate: "15%",
  },
  {
    title: "订单总数",
    value: "2,341",
    icon: ShoppingCart,
    bgColor: "var(--el-color-success)",
    trend: "up",
    rate: "12%",
  },
  {
    title: "总收入",
    value: "¥89,242",
    icon: Wallet,
    bgColor: "var(--el-color-warning)",
    trend: "down",
    rate: "8%",
  },
  {
    title: "转化率",
    value: "68%",
    icon: TrendCharts,
    bgColor: "var(--el-color-info)",
    trend: "up",
    rate: "5%",
  },
];

// 图表相关
const timeRange = ref("week");
const trendChartRef = ref<HTMLElement>();
const pieChartRef = ref<HTMLElement>();
const trendChart = shallowRef<echarts.ECharts>();
const pieChart = shallowRef<echarts.ECharts>();

// 最近订单
const recentOrders = [
  {
    id: "DD20240301",
    product: "iPhone 15 Pro",
    amount: 8999,
    status: { type: "success", text: "已完成" },
  },
  {
    id: "DD20240302",
    product: "MacBook Air",
    amount: 7999,
    status: { type: "warning", text: "处理中" },
  },
  {
    id: "DD20240303",
    product: "AirPods Pro",
    amount: 1999,
    status: { type: "info", text: "待付款" },
  },
  {
    id: "DD20240304",
    product: "iPad Air",
    amount: 4999,
    status: { type: "success", text: "已完成" },
  },
];

// 系统动态
const recentActivities = [
  {
    content: "张三完成了订单 DD20240301",
    time: "10分钟前",
    type: "success",
  },
  {
    content: "新用户李四注册了账号",
    time: "30分钟前",
    type: "info",
  },
  {
    content: "系统完成了每日数据备份",
    time: "1小时前",
    type: "warning",
  },
  {
    content: "王五更新了商品信息",
    time: "2小时前",
    type: "primary",
  },
];

// 初始化趋势图表
const initTrendChart = () => {
  if (trendChartRef.value) {
    trendChart.value = echarts.init(trendChartRef.value);
    updateTrendChart();
  }
};

// 更新趋势图表
const updateTrendChart = () => {
  const option: EChartsOption = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["销售额", "订单量"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售额",
        type: "line",
        smooth: true,
        data: [3000, 2800, 3500, 5000, 4800, 6000, 7000],
        areaStyle: {
          opacity: 0.1,
        },
      },
      {
        name: "订单量",
        type: "line",
        smooth: true,
        data: [320, 280, 350, 500, 480, 600, 700],
        areaStyle: {
          opacity: 0.1,
        },
      },
    ],
  };
  trendChart.value?.setOption(option);
};

// 初始化饼图
const initPieChart = () => {
  if (pieChartRef.value) {
    pieChart.value = echarts.init(pieChartRef.value);
    const option: EChartsOption = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "销售分布",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "电子产品" },
            { value: 735, name: "服装" },
            { value: 580, name: "食品" },
            { value: 484, name: "图书" },
            { value: 300, name: "其他" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    pieChart.value.setOption(option);
  }
};

// 监听窗口大小变化
const handleResize = () => {
  trendChart.value?.resize();
  pieChart.value?.resize();
};

onMounted(() => {
  initTrendChart();
  initPieChart();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
  trendChart.value?.dispose();
  pieChart.value?.dispose();
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: var(--el-bg-color-page);
}

.data-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--el-box-shadow);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.icon-wrapper .el-icon {
  font-size: 30px;
}

.data-info {
  flex: 1;
}

.data-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}

.data-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
}

.data-compare {
  font-size: 13px;
  color: var(--el-text-color-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.up {
  color: var(--el-color-success);
  display: flex;
  align-items: center;
}

.down {
  color: var(--el-color-danger);
  display: flex;
  align-items: center;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 340px;
}

.activity-row {
  margin-bottom: 20px;
}

.activity-card {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount {
  color: var(--el-color-danger);
  font-weight: bold;
}

:deep(.el-timeline-item__node) {
  background-color: var(--el-color-primary);
}

:deep(.el-timeline-item__content) {
  color: var(--el-text-color-regular);
}
</style>
